<template>
  <div class="solutionInfo">
    <div class="left">
      <client-menu @change="changeLevel" />
    </div>
    <div class="right">
      <div class="list">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="item"
          @click="getContent(item)"
        >
          <div>
            <el-image
              v-if="item.imgUrl"
              style="width: 150px; height: 150px;margin-right: 10px;"
              :src="baseURL + item.imgUrl"
              fit="cover"
            />
          </div>
          <div>
            <div class="name">{{ item.solutionName || "无" }}</div>
            <div class="content" v-html="item.content"></div>
            <div class="arrowRight">
              <el-icon>
                <DArrow-right />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import clientMenu from "@/components/client-menu/left-menu.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dataList = ref<any>([]); // 解决方案列表

const baseURL = import.meta.env.VITE_BASE_URL;

// 切换解决方案一级菜单
const changeLevel = (val: any) => {
  dataList.value = val.children;
  dataList.value.forEach((item: any) => {
    const index = item.content.indexOf('<img ');
    if (index != -1) {
      item.content = item.content.substr(0, index)
    }
  });
};

const getContent = (item: any) => {
  const solutionId = item.solutionId;
  router.push(`/client/solution/detials?parentId=${solutionId}`);
};
</script>
<style lang="less" scoped>
.solutionInfo {
  display: flex;
  .left {
    width: 194px;
  }
  .right {
    flex: 1;
    margin-left: 20px;
    justify-content: space-around;
    align-items: center;
    .item {
      width: 100%;
      border-radius: 5px;
      padding: 20px;
      margin-bottom: 20px;
      color: #313131;
      transition: all 0.3s;
      border: 1px solid transparent;
      display: flex;
      &:hover {
        cursor: pointer;
        border: 1px solid #e7e9f1;
        background: linear-gradient(180deg, #f5f7fa 0%, #fff 100%);
      }
      .name {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .content {
        font-size: 14px;
      }
      .arrowRight {
        text-align: right;
      }
    }
  }
}
</style>
